<template>
  <div class="new-table-style">
    <el-table :border="true" :data="tableData" align="left" ref="multipleTable" v-if="activeTab==1" @select-all="onSelectAll" @selection-change="handleSelectionChange">
      <el-table-column  type="selection" width="55"> </el-table-column>
      <el-table-column label="款项类别" prop="fundsTypeItemName" width="100"></el-table-column>
      <el-table-column label="收费总额" prop="receivedAmount" width="90"></el-table-column>
      <el-table-column label="已核销金额" prop="writeOffAmount" width="110"></el-table-column>
      <el-table-column label="待核销金额" prop="surplusAmount" width="110"></el-table-column>
      <el-table-column label="客户" prop="customerInfoName" width="100"></el-table-column>
      <el-table-column label="收款人" prop="operatorName" width="100"></el-table-column>
      <el-table-column label="收款公司" prop="payer"></el-table-column>
      <el-table-column label="收款账户" prop="paymentAccount" width="120"></el-table-column>
      <el-table-column label="收款方式" prop="paymentMethodName" width="90"></el-table-column>
      <el-table-column label="收款批号" prop="batchNo" width="140"></el-table-column>
      <el-table-column label="冲账记录数" prop="paymentRecordNum" width="110"></el-table-column>
      <el-table-column label="备注" prop="remark"></el-table-column>
    </el-table>
    <el-table :border="true" :data="tableData" align="left" ref="multipleTable" v-if="activeTab==4" @select-all="onSelectAll" @selection-change="handleSelectionChange">
      <el-table-column  type="selection" width="55"> </el-table-column>
      <el-table-column label="退款总额" prop="receivedAmount" width="110"></el-table-column>
      <el-table-column label="客户" prop="customerInfoName"></el-table-column>
      <el-table-column label="经办人" prop="operatorName" width="110"></el-table-column>
      <el-table-column label="收款公司" prop="payer"></el-table-column>
      <el-table-column label="收款账户" prop="paymentAccount"></el-table-column>
      <el-table-column label="付款方式" prop="paymentMethodName" width="110"></el-table-column>
      <el-table-column label="退款批号" prop="batchNo" width="200"></el-table-column>
      <el-table-column label="冲账记录数" prop="paymentRecordNum" width="120"></el-table-column>
      <el-table-column label="备注" prop="remark"></el-table-column>
    </el-table> 
    <Pagination v-if="total > 0" @change="pageChange" :total="total" paginationLayout="total, prev, pager, next" />
    <div class="absolute-box btn-box flex">
      <el-button type="primary" size="small"   class="f-right" @click="out()">Excel导出</el-button>
      <el-button type="primary" size="small"  class="f-right" @click="addSaleReport">收款明细</el-button>
      <el-button type="primary" size="small" class="f-right" @click="getList">查询</el-button>
    </div>
    <el-dialog :visible.sync="showCollectionDialog" title="收款明细" width="90%" :close-on-click-modal="false" :close-on-press-escape="false">
      <collectionsDetails v-if="activeTab==1" @closeDialog="closeDialog" ref="saleReportAdd" :accountRechargeKey="accountRechargeKey"></collectionsDetails>
    </el-dialog>
    <el-dialog :visible.sync="showReturnDialog" title="退款明细" width="90%" :close-on-click-modal="false" :close-on-press-escape="false">
      <returnDetails v-if="activeTab==4" @closeDialog="closeDialog" ref="saleReportAdd" :accountRechargeKey="accountRechargeKey"></returnDetails>
    </el-dialog>
  </div>
</template>

<script>
  import { actualIncomList,actualIncomExport} from '../../../api/receiptRefundAccount';
  import collectionsDetails from './collectionsDetails.vue';
  import returnDetails from './returnDetails.vue';
  export default {
    name: 'billTable',
    components:{collectionsDetails,returnDetails},
    props: {
      activeTab: {
        type: String,
        default: '1',
      },
      searchParams:{
        type:Object,
        default:()=>{
          return {}
        }
      }
    },
    data() {
      return {
        tableData: [],
        total: 0,
        currentPage: 1,
        pageSize: 10,
        showCollectionDialog:false,
        showReturnDialog:false,
        accountRechargeKey:'',
        multipleTable:[]
      };
    },
    methods: {
      init(){
        this.multipleTable = []
        this.accountRechargeKey = ''
        this.getList()
      },
      async getList(more){
        let res = await actualIncomList({
          currentPage: more ? this.currentPage : 1,
          pageSize: this.pageSize,
          projectKeys:[localStorage.getItem('projectKey')],
          geCollectionTime:this.searchParams.collectionTime?this.searchParams.collectionTime[0]:null,
          leCollectionTime:this.searchParams.collectionTime?this.searchParams.collectionTime[1]:null,
          ...this.searchParams,
          fundsTypeList:[this.activeTab]
        });
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },
      handleSelectionChange(rows){
        if (rows.length > 1) {
          const newRows = rows.filter((it, index) => {
            if (index == rows.length - 1) {
              this.$refs.multipleTable.toggleRowSelection(it, true);
              return true;
            } else {
              this.$refs.multipleTable.toggleRowSelection(it, false);
              return false;
            }
          });
          this.multipleTable = rows
          this.accountRechargeKey = this.multipleTable[0].primaryKey
        } else if(rows.length == 1){
          this.multipleTable = rows
          this.accountRechargeKey = this.multipleTable[0].primaryKey
        }
      },
      onSelectAll() {
        this.$refs.multipleTable.clearSelection();
      },
      addSaleReport(){
        if(this.multipleTable.length==0){
          this.$message.error('请选择台账！')
          return
        }
        if(this.activeTab==1){
          this.showCollectionDialog = true
          this.showReturnDialog = false
        }else{
          this.showReturnDialog = true
          this.showCollectionDialog = false
        }
        setTimeout(() => {
          this.$refs.saleReportAdd.init()
        }, 1000);
        
      },
      closeDialog(data){
        this.showCollectionDialog = false
        this.showReturnDialog = false
        this.$refs.multipleTable.clearSelection();
      },
       //导出
      async out() {
        let res = await actualIncomExport({
          projectKeys:[localStorage.getItem('projectKey')],
          geCollectionTime:this.searchParams.collectionTime?this.searchParams.collectionTime[0]:null,
          leCollectionTime:this.searchParams.collectionTime?this.searchParams.collectionTime[1]:null,
          ...this.searchParams,
          fundsTypeList:[this.activeTab]
        })
        window.location.href = res.url
      },
      handleClose(){
        this.$refs.saleReportAdd.closeDialog({success:false})
      },
      //分页
      pageChange(page) {
        this.currentPage = page.currentPage;
        this.getList('more');
      },
    },
  };
</script>

<style lang="scss" scoped>
  .search-style-box {
    background: #fbfbfb;
    border-radius: 3px;
    padding: 20px 20px 0;
    margin-bottom: 20px;
  }

  .btn-box {
    right: 0;
    top: -45px;
  }
</style>
